<template>
  <!-- 测试用的dome页面 -->
  <div class="home"
       @touchstart='touchstart'
       @touchmove='touchmove'>
    <div class="box"></div>
    <van-button type="info">信息按钮</van-button>
    <van-uploader>
      <van-button icon="plus"
                  type="primary">上传文件</van-button>
    </van-uploader>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {

    }
  },
  methods: {
    touchstart (e) {
      // 如果你要阻止点击事件，请反注释下一行代码
      // e.preventDefault()
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
    },
    touchmove (e) {
      // console.log('滑动参数', e);
      // e.preventDefault()
      this.moveX = e.touches[0].clientX
      this.moveY = e.touches[0].clientY
      // console.log(this.startY - this.moveY);
      // this.startY - this.moveY <= 0 ? console.log('你在往下滑', this.startY - this.moveY) : console.log('你在往上滑', this.startY - this.moveY)
      if (this.startY - this.moveY <= -100) {
        console.log('下拉触发');
      }
      if (this.startY - this.moveY >= 100) {
        console.log('上滑触发');
        // do something
      }
    }
  },
}
</script>

<style lang="less" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>
